<template>
	<view class="nearby-store-wrapper" :style="[AppSkinVar]">
		<e-loading-page :loading="loading"  >
			<template #icon>
				<loader ></loader>
			</template>
		</e-loading-page>
		<view class="top-header e-rela">
			<!-- @change="e => (bannerCurrent = e.detail.current)" -->
			<swiper class="top-header__swiper" autoplay>
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<load-image mode="aspectFill" :size="['100vw','394rpx']" :src="item">
					</load-image>
				</swiper-item>
			</swiper>
			<!-- <view class="top-header__swiper__indicators e-font-24" v-if="swiperList.length">
				<text class="c-white">{{ bannerCurrent + 1 }}</text>
				<text class="c-ef">/{{ swiperList.length }}</text>
			</view> -->
			<view class="header-content bg-white e-p-20 e-flex e-flex-between" v-if="storeInfo">
				<view class="e-flex">
					<view class="">
						<view class="e-line-2 store-name e-font-36 fw-600 c-black">
							{{ storeInfo.name }}
						</view>
						<view class="e-m-t-26 e-font-26 e-flex">
							<view class="e-flex" v-if="starNum || greyStarNum">

								<image v-for="item in starNum" src="/static/nearby/star.png" class="img-20 e-m-r-10">
								</image>
								<image v-for="item in greyStarNum" src="/static/nearby/grey-star.png"
									class="img-20 e-m-r-10"></image>
								<view class="c-fd">{{ storeInfo.averageScore }}</view>
							</view>
							<view class="e-font-26 c-333 e-m-l-20">{{ storeInfo.evaluateCount }} {{ $t('nearby.条评价') }}
							</view>
							<view class="e-font-26 c-333 e-m-l-12">
								<!-- {{$unitEn}}18/{{$t('user.人')}} -->
							</view>
						</view>
					</view>
				</view>
				<view class="e-flex">
					<view class="e-m-r-20" @tap="handleShare">
						<view class="e-flex-xy-center">
							<app-image  :size="['32rpx']"  src="layout/basics/share1.png" ></app-image>
						</view>
						<view class="c-666 e-font-20">{{$t('layout.分享') }}</view>
					</view>
					<view>
						<view class="e-flex-xy-center">
							<text class="e-font-32 c-primary iconfont icon-shoucang2" v-if="storeInfo.hasCollected == 1"
								@tap="changeCollage(1)"></text>
							<text class="e-font-32 iconfont icon-shoucang1" v-else @tap="changeCollage(2)"></text>
						</view>
						<view class="c-666 e-font-20"
							:style="{color: storeInfo.hasCollected == 1 ? AppSkin.primary : ''}">{{$t('classify.收藏') }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="nearby-store-tabs e-flex e-font-30 e-m-b-20">
			<view class="e-flex-1 text-center" :class="{ 'is-active': swiperCurrent === 0 }"
				@tap.stop="swiperCurrent = 0">
				{{ $t('store.套餐') }}
			</view>
			<view class="e-flex-1 text-center" :class="{ 'is-active': swiperCurrent === 1 }"
				@tap.stop="swiperCurrent = 1">
				{{ $t('order.评价') }}
			</view>
			<view class="e-flex-1 text-center" :class="{ 'is-active': swiperCurrent === 2 }"
				@tap.stop="swiperCurrent = 2">
				{{ $t('nearby.买单') }}
			</view>
			<view class="e-flex-1 text-center" :class="{ 'is-active': swiperCurrent === 3 }"
				@tap.stop="swiperCurrent = 3">
				{{ $t('nearby.店铺简介') }}
			</view>
		</view>
		
		<template v-if="storeInfo">
			<view class="body-box">
				<swiper class="body-box__swiper"  :current="swiperCurrent"
					@change="e => (swiperCurrent = e.detail.current)">
					<swiper-item >
						<scroll-view class="body-box__swiper-classify-scroll" scroll-x="true" style="white-space: nowrap;" :scroll-with-animation="true"
							:scroll-left="scrollLeft">
							<view class="e-flex  e-p-l-20">
								<view class="classify-item e-flex-xy-center c-333 e-font-28 e-m-r-10"
									v-for="item in allClassifyList" :key="item.id"
									:class="{'fw-500 e-font-32': classifyIndex === item.id}"
									@tap.stop="e=>handleChangeClassify(e,item.id)">
									{{item.name}}
								</view>
							</view>
						</scroll-view>
						<view>
							<scroll-view class="body-box__swiper-goods-scroll bg-white"  scroll-y @scrolltolower="handleQueryPage()"
								 lower-threshold="60">
								<view class="e-flex e-flex-wrap e-p-20">
									<view class="goods-item e-m-b-20 bg-white" v-for="(item,index) in goodsList"
										:key="item.id" :style="{'margin-right': (index + 1) % 2 !== 0 ? '10px' : 0}"
										@tap="$goTo('/pages/systemPay/nearby/goods/index', {id:item.id,storeId})">
										
										<view class="e-m-b-12">
											<load-image :size="['344rpx','346rpx']" :src="item.coverImg">
											</load-image>
										</view>
										
										<view class="e-p-l-20 e-p-r-18">
											<view class="c-black e-font-26 e-line-2 e-m-b-8">
												{{item.name}}
											</view>
											<view class="c-red fw-600 e-flex e-m-b-8">
												<text class="e-font-24">{{$unitEn}}</text>
												<text class="e-font-32">{{item.price}}</text>
											</view>
											<!-- 活动信息 -->
											<activityBadge :info="item"></activityBadge>
											<!-- <view class="c-c0 e-font-24 e-flex">
												<text>{{$t('common.销量')}}：</text>
												<text>{{ $formatNumberToK(item.stockSold || 0) }}</text>
											</view> -->
										</view>
									</view>
								</view>

							</scroll-view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="nearby-store-evaluation">
							<view class="e-flex e-flex-between e-p-30 bg-white">
								<view class="e-flex">
									<view class="nearby-store-evaluation__tab-item e-m-r-30 text-center"
										:class="{ 'bg-primary c-white': evaluationType === 0 }"
										@tap="evaluationType = 0">
										<text>{{ $t('common.全部') }}({{ storeInfo.evaluateCount > 999 ? '999+' : storeInfo.evaluateCount }})</text>

									</view>
									<view class="nearby-store-evaluation__tab-item text-center"
										:class="{ 'bg-primary c-white': evaluationType === 1 }"
										@tap="evaluationType = 1">
										<text>{{ $t('classify.有图') }}({{ storeInfo.evaluateCountPhoto > 999 ? '999+' : storeInfo.evaluateCountPhoto }})</text>

									</view>
								</view>
							</view>
							<view class="nearby-store-evaluation__scroll">
								<scroll-view  scroll-y
									@scrolltolower="getEvaluationList" class="bg-white" lower-threshold="60">
									<view class="e-p-30 e-flex e-flex-items-start"
										:class="{ 'p-b-0': item.photos && item.photos.length > 0 }"
										v-for="item in evaluationList" :key="item.id">
										<view class="nearby-store-evaluation__avatar e-flex">
											<load-image mode="aspectFill" size="60rpx" shape="circle" :src="item.customerHeaderImg">
												<template #error>
													<app-image mode="aspectFill" :size="['50rpx']" shape="circle" src="default-headerImg.png" ></app-image>
												</template>
											</load-image>
										</view>
										<view class="content e-flex-1">
											<view class="e-flex e-flex-between">
												<text
													class="e-font-34 ">{{ getNickName(item.customerNickName) }}</text>
												<view class="e-flex">
													<image class="img-32" v-for="items in item.averageScore"
														:key="items" src="../static/star1.png" />
													<view class="e-flex">
														<app-image  :size="['32rpx']"  src="layout/basics/star_default.png" v-for="items in 5 - item.averageScore"
															:key="items"></app-image>
													</view>
												</view>
											</view>
											<view class="e-flex e-font-30 c-placeholder e-m-b-20 e-m-t-10">
												<view class="e-m-r-20">{{ item.createTime }}</view>
												<view>{{ item.skuSpec }}</view>
											</view>
											<view class="e-font-30 e-m-b-20">
												{{ item.content }}
											</view>
											<e-album :urls="urls(item.photos)" singleSize="99"
												multipleSize="180rpx" v-if="item.photos"></e-album>

											<view class="nearby-store-evaluation__reply-box e-m-t-18 e-font-24"
												v-if="item.hasStoreReply && item.contentStoreReply">
												{{ $t('common.商家回复') }}：{{ item.contentStoreReply }}
											</view>
										</view>
									</view>
									<load-more v-if="!evaluationIsEmpty" :showLoad="evaluationShowLoad"></load-more>
								</scroll-view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="e-p-l-20 e-p-r-20">
							<view class="swiper-item-three bg-white e-flex">
								<view class="e-flex-1">
									<view class="e-font-32 c-333 fw-600 e-m-b-10">
										{{$t('nearby.快捷买单')}}
									</view>
									<view class="e-font-26 c-333">
										{{$t('nearby.线上买单更便捷')}}
									</view>
								</view>
								<view class="check-btn c-white e-font-28 e-flex e-flex-xy-center"
									:style="{background: AppSkin.primary}" @tap="jumpPay">
									{{$t('nearby.买单')}}
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="nearby-store-info">
							<view class="e-p-20">
								<view class="e-flex  e-flex-items-start bg-white-box e-m-b-20">
									<view class="e-p-t-4">
										<image src="/static/nearby/address_min.png" class="img-28"></image>
									</view>
									<view class="e-flex-1 e-flex e-flex-between e-m-l-20 e-p-r-20">
										<view class="">
											<view class="e-font-26 e-m-b-10">
												<text>{{ storeInfo.licenseAddrText||storeInfo.name }}</text>
											</view>
											<view class="c-secondary" v-if="$countryCode=== 'zh_CN'">
												<text>{{$t('nearby.距您')}}{{ distance }}</text>
											</view>
											<view class="c-secondary keep-all" v-else-if="$countryCode==='en_US'">
												<text>{{ distance }} away from you</text>
											</view>
										</view>
										<view class="e-flex e-m-l-70">
											<view class="e-m-r-80" @tap="navigation">
												<view class="e-flex-xy-center">
													<image src="/static/nearby/navigation1.png" class=" img-48"></image>
												</view>
												<view class="text-center e-font-22  keep-all">
													{{$t('nearby.导航')}}
												</view>
											</view>
											<view @tap="phoneShow = true">
												<view class="e-flex-xy-center">
													<image src="../static/phone.png" class="img-48"></image>
												</view>
												<view class="text-center e-font-22 keep-all">
													{{$t('nearby.联系商家')}}
												</view>
											</view>

										</view>
									</view>
								</view>

								<view class="e-flex align-center bg-white-box e-m-b-20">
									<image src="../static/time.png" class="img-28"></image>
									<text class="e-p-l-20 e-p-r-10">{{ $t(`nearby.${storeState ? '营业中' : '已打烊'}`) }}
									</text>
									<view class="e-flex-1 e-flex" v-if="storeInfo.beginTime">
										| {{ storeInfo.beginTime }} - {{ storeInfo.endingTime }}
									</view>
								</view>
								<view class="e-flex e-flex-items-start bg-white-box e-m-b-20" v-if="richText">
									<view class="e-p-t-4">
										<image src="../static/icon1.png" class="img-28"></image>
									</view>
									<view class="e-flex-1 e-m-l-20">
										<rich-text :nodes="richText"></rich-text>
									</view>
								</view>
							</view>

						</view>
					</swiper-item>
				</swiper>
			</view>
			<e-popup :show="phoneShow" bgColor="transparent" @close="phoneShow = false">
				<view class="nearby-phone-popup__item bg-white text-center e-font-36 e-m-b-30" @tap="call">
					{{ $t('nearby.商家电话') }}：{{ storeInfo.shopkeeperTelephone }}
				</view>
				<view class="nearby-phone-popup__item bg-white text-center e-font-36 c-65 e-m-b-68"
					@tap="phoneShow = false">
					{{ $t('common.取消') }}
				</view>
			</e-popup>
		</template>

		<viewPopup ref="viewPopupRef" :isShow="isShow" :primary="AppSkin.primary" :storeId="storeId" :list="goodsList"
			:listShow="checkGoodsShow" :isPay="isPay" @setShow="isShow = false" @closePay="isPay = false"
			@close="checkGoodsShow = false" @cartChange="cartChange"></viewPopup>
		<!-- #ifndef MP-WEIXIN||MP-ALIPAY -->
		<share-popup type="2" :shareUrl="webShareUrl" :mpShareUrl="mpShareUrl" :show="sharePopupShow"
			@close="sharePopupShow = false"></share-popup>
		<!-- #endif -->
		<view class="canvas-box  e-abso ">
			<canvas ref="canvas" class="store-canvas " id="store-canvas" canvas-id="store-canvas"></canvas>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, watch } from 'vue'
	import {
		getNearbyStoreDetail,
		getStoreEvaluationList,
		getNearbyStoreGoodsList,
		postAddCollect,
		postDelCollect,
		getGoodsShareUrl,
		getStoreGrouping
	} from '@/common/request/api'
	import type { NearbyStoreInfo, ClassifyItem, StoreGoodsItem } from '@/common/request/api'
	import { useCurrentInstance, useNavigation, useQueryPage, useCanvas } from '@/common/hooks'
	import viewPopup from './child/popup.vue'
	import type { ViewPopupInstance } from './type'
	import {
		drawQRCode,
		drawRoundedRectangle,
		drawText
	} from '@/common/canvas'
	/* 引入uqrcode核心js */
	import { uQRCode, getAppImageInfo } from '@/common/utils'
	// #ifdef MP-WEIXIN
	import {
		sceneParamsToObj
	} from '@/common/utils'
	// #endif
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		timeFormat
	} from '@/common/utils'
	import {
		useUser
	} from '@/common/stores'
	import {
		storeToRefs
	} from 'pinia'
	// #ifdef PRIVATE || SUBSCRIPTION
	import { mpShareInit,sys } from '@/common/utils'
	import type { MpShare } from '@/common/utils'
	import { getShareLink } from '@/common/wxInit'
	// #endif
	import type { UniGlobalData } from '@/typings/uni'
	import type {RequestFromType } from '@/common/request/type'

	const props = defineProps<{
		scene ?: string
		id ?: string
		step ?: string
	}>()

	const ctx = useCurrentInstance()
	const { openNavigation } = useNavigation()
	const { isLogin } = storeToRefs(useUser())

	let isLoad = true
	const isShow = ref(false)

	let pageParams : Record<string, any> = {}

	const loading = ref(true)
	const storeId = ref('')
	const storeInfo = ref<NearbyStoreInfo>()

	// const bannerCurrent = ref(0)
	const swiperList = computed(() => {
		return storeInfo.value?.realScenePhoto?.split(',') || []
	})
	const distance = computed(() => {
		let num = storeInfo.value?.distance || 0
		return num > 1000 ? `${(num / 1000).toFixed(1)}km` : `${num}m`
	})
	const richText = computed(() => {
		return storeInfo.value?.description ? storeInfo.value.description.replace(/\<img/gi,
			'<img style="max-width:100%;height:auto;display: block;" ') : ''
	})

	const storeState = computed(() => {
		let beginTime = storeInfo.value?.beginTime||''
		let endingTime = storeInfo.value?.endingTime||''
		if (beginTime) {
			let date = timeFormat(new Date().getTime(), 'hh:MM')
			let h = `${date[0]}${date[1]}`
			let bh = `${beginTime[0]}${beginTime[1]}`
			let eh = `${endingTime[0]}${endingTime[1]}`

			if (h < bh || h > eh) {
				// 比对小时,不在开始时间与结束时间之内，则店铺已打烊
				return false
			}
			if (h > bh && h < eh) {
				return true
			}
			let m = `${date[3]}${date[4]}`
			let bm = `${beginTime[3]}${beginTime[4]}`
			let em = `${endingTime[3]}${endingTime[4]}`
			if (Number(h) === Number(bh)) {
				// 当前时间与开店时间在同一个小时内,判断当前时间是否小于开店时间
				return m > bm
			}
			if (Number(h) === Number(eh)) {
				// 当前时间与关店时间在同一个小时内,判断当前时间是否大于关店时间
				return em > m
			}
		}
		return false
	})
	const starNum = computed(() => {
		return Math.floor(storeInfo.value?.averageScore || 0)
	})
	const greyStarNum = computed(() => {
		return Math.ceil(5 - Math.floor(storeInfo.value?.averageScore || 0))
	})

	const classifyIndex = ref(-1)
	const swiperCurrent = ref(0)


	const requestParams = computed(() => {
		return {
			storeId: storeId.value,
			groupingId: classifyIndex.value === -1 ? undefined : classifyIndex.value
		}
	})
	const {
		showLoad,
		isEmpty,
		list: goodsList,
		handleQueryPage,
		handleRefresh: reset
	} = useQueryPage({
		api: getNearbyStoreGoodsList,
		option: {
			params: requestParams,
			responseKey: "data.rows",
			totalKey: "data.total"
		}
	})

	const scrollLeft = ref(0)

	const handleChangeClassify = (e : { currentTarget : { offsetLeft : number } }, id : number) => {
		classifyIndex.value = id
		// 此处为屏幕宽度
		const windowWidth = sys().windowWidth
		const halfWidth = windowWidth / 2
		scrollLeft.value = e.currentTarget.offsetLeft - halfWidth
		loading.value = false
		reset()
	}


	const evaluationType = ref(0)
	const requestEvaluationParams = computed(() => {
		return {
			storeId: storeId.value,
			hasPhoto: evaluationType.value === 1 ? 1 : undefined
		}
	})

	watch(evaluationType, () => {
		handleRefreshEvaluationList()
	})

	const {
		showLoad: evaluationShowLoad,
		isEmpty: evaluationIsEmpty,
		list: evaluationList,
		handleQueryPage: getEvaluationList,
		handleRefresh: handleRefreshEvaluationList
	} = useQueryPage({
		api: getStoreEvaluationList,
		option: {
			params: requestEvaluationParams,
			responseKey: "rows"
		}
	})


	const getGoodsList = () => {
		reset().then(() => {
			if (goodsList.length === 0 && classifyIndex.value == -1) {
				swiperCurrent.value = 2
			}
		})
	}

	const getNickName = (val : string) => {
		if (val.length === 11) {
			return val.substring(0, 3) + '****' + val.substring(val.length - 4)
		} else if (val.length <= 2) {
			return val.substring(0, 1) + '*'
		} else {
			return val.substring(0, 1) + '*' + val.substring(val.length - 1)
		}
	}
	const classifyList = ref<ClassifyItem[]>([])
	const allClassifyList = computed(() => {
		return [
			{
				id: -1,
				name: ctx.$t('common.全部'),
			},
			...classifyList.value
		]
	})
	// let appTopPadding = '44px'
	// // #ifdef H5
	// appTopPadding = '0px'
	// // #endif
	// const scrollViewH = ref(`calc(100vh - ${appTopPadding} - 303px - 20rpx)`)



	const getData = (id : string) => {
		getNearbyStoreDetail(id).then(res => {

			storeInfo.value = res.data
			if (storeInfo.value.name) {
				uni.setNavigationBarTitle({
					title: storeInfo.value.name
				})
			}
			
			isLoad && getGoodsList()
			isLoad = false
			// #ifdef APP-PLUS
			uni.$endless.mpShare = {
				title: res.data.name,
				path: '', // 默认为当前页面路径
				appParams: pageParams,
				imageUrl: ctx.$fullLink(res.data.logo),
				appDesc: res.data.description || ''
			}
			// #endif
			// #ifdef MP-WEIXIN||MP-ALIPAY
			uni.$endless.mpShare = {
				title: storeInfo.value.name,
				path: '', // 默认为当前页面路径
				imageUrl: ctx.$fullLink(res.data.logo)
			}

			// #endif

			// #ifdef PRIVATE || SUBSCRIPTION
			uni.$endless.mpShare = {
				title: res.data.name,
				link: getShareLink(),
				imgUrl: ctx.$fullLink(res.data.logo)
			}
			mpShareInit(uni.$endless.mpShare as MpShare)
			// #endif



		}).finally(() => {
			loading.value = false
		})
	}
	const isPay = ref(false)
	const goPay = () => {
		isPay.value = true
	}
	const jumpPay = () => {
		ctx.$goTo('/pages/systemPay/nearby/pay', {
			id: storeId.value
		})
	}
	// 如果是小程序，获取的是分享卡片上的二维码地址
	// h5获取的是分享的当前页面地址
	const getQRCodeUrl = () => {
		uni.showLoading({
			title: 'loading...'
		})
		// 如果是小程序，获取的是分享卡片上的二维码地址
		// h5获取的是分享的当前页面地址
		let url = 'pages/nearby/store/info'
		// #ifndef MP-WEIXIN||MP-ALIPAY
		url = '/' + url
		// #endif
		let formType : RequestFromType = 'mp_private'

		// #ifndef  PRIVATE
		formType = getApp<UniGlobalData>().globalData?.payFromType
		// #endif
		getGoodsShareUrl({
			url,
			formType,
			scene: ctx.$getShareUrlScene(`id=${storeId.value}`)
		}).then(res => {
			draw(res.shareUrl)
		}).catch(() => {
			uni.hideLoading()
		})
	}
	const handleShare = () => {
		if (isLogin.value) {
			getQRCodeUrl()
		} else {
			ctx.$goLogin({
				isShowModal: false
			})
		}

	}

	const webShareUrl = ref('')
	const { canvasdraw, canvasImgUrl: mpShareUrl } = useCanvas()
	const sharePopupShow = ref(false)

	const draw = async (shareUrl : string) => {
		canvasdraw({
			bgImgUrl: storeInfo.value?.hasCustomShare ? storeInfo.value?.customShareImg : undefined,
			canvasId: 'store-canvas',
			that: ctx,
			width: 290,
			height: 290,
			bgWidth: 290,
			bgHeight: 290,
			drawIng: async (canvasCtx) => {
				if (storeInfo.value?.logo) {
					const logoResult = await getAppImageInfo(ctx.$fullLink(storeInfo.value?.logo))
					canvasCtx.drawImage(logoResult.path, 110, 253, 74, 74)
				}
				let name = storeInfo.value?.name||''

				let width = canvasCtx.measureText(name).width
				if (width > 72) {
					let chr = name.split('')
					let temp = ''
					for (let a = 0; a < chr.length; a++) {
						if (canvasCtx.measureText(temp).width >= 72) {
							temp = temp.substr(0, temp.length - 2) + '...'
							break
						}
						temp += chr[a]
					}
					name = temp
					width = canvasCtx.measureText(name).width
				}
				drawText(canvasCtx, {
					x: 135 - width / 2,
					y: 348,
					text: name,
					size: 14,
					fillStyle: '#333',
					font: 'normal normal bold 14px'
				})


				drawText(canvasCtx, {
					x: 52,
					y: 388,
					text: '① ' + ctx.$t('store.分享描述1'),
					size: 12,
					fillStyle: '#666',
					font: 'normal normal bold 12px'
				})
				drawText(canvasCtx, {
					x: 52,
					y: 406,
					text: '② ' + ctx.$t('store.分享描述2'),
					size: 12,
					fillStyle: '#666',
					font: 'normal normal bold 12px'
				})
				// #ifdef MP-WEIXIN||MP-ALIPAY
				let codePath = await getAppImageInfo(ctx.$fullLink(shareUrl))
				if (codePath.path) {
					canvasCtx.drawImage(codePath.path, 184, 360, 65, 65)
				}
				// #endif
				// #ifndef MP-WEIXIN||MP-ALIPAY
				drawRoundedRectangle(canvasCtx, {
					x: 184,
					y: 360,
					width: 65,
					height: 65,
					radius: 0,
					lineWidth: 2,
					strokeStyle: '#E7E7E7'
				})
				drawQRCode(canvasCtx, {
					x: 189,
					y: 365,
					size: 55, //二维码大小
					margin: 0, // 填充边距
					modules: uQRCode.getModules({
						id: 'store-canvas', //canvasId
						mode: 'canvas', // 生成模式
						size: 55, //二维码大小
						margin: 0, // 填充边距
						backgroundColor: '#fff', // 背景色
						foregroundColor: '#000', // 前景色
						errorCorrectLevel: uQRCode.errorCorrectLevel.H, // 纠错等级,
						text: shareUrl
					})
				})
				webShareUrl.value = shareUrl
				// #endif
			}
		}).then(() => {
			showShare()
		}).finally(() => {
			uni.hideLoading()
		})
	}


	const showShare = () => {
		// #ifdef MP-WEIXIN
		wx.showShareImageMenu({
			path: mpShareUrl.value
		})
		// #endif
		// #ifndef MP-WEIXIN
		sharePopupShow.value = true
		// #endif
	}


	const urls = (arr : string[]) => {
		return arr ? arr.map(item => ctx.$fullLink(item)) : []
	}

	const changeCollage = (type : number) => {
		const fn = type === 1 ? postDelCollect : postAddCollect
		const title = type === 1 ? ctx.$t('store.已取消') : ctx.$t('store.已收藏')
		fn({
			targetId: storeId.value
		}, 2).then(() => {
			ctx.$toastApp(title)
			getData(storeId.value)
		})
	}
	const viewPopupRef = ref<ViewPopupInstance>()
	// const getSku = (goods : StoreGoodsItem) => {
	// 	viewPopupRef.value?.getSku?.(goods)
	// }
	const price = ref(0)
	const cartSize = ref(0)
	const cartChange = (_price : number, size : number) => {
		price.value = _price
		cartSize.value = size
	}
	const call = () => {
		storeInfo.value&&uni.makePhoneCall({
			phoneNumber: storeInfo.value.shopkeeperTelephone //仅为示例
		})
	}
	const navigation = () => {
		storeInfo.value&&openNavigation({
			location: storeInfo.value.location?.split?.(',')||[],
			title: storeInfo.value.name,
			address: storeInfo.value.licenseAddrText
		})
	}

	const checkGoodsShow = ref(false)
	const phoneShow = ref(false)


	onLoad(() => {
		let query = { ...props }
		// #ifdef MP-WEIXIN
		if (props.scene) {
			query = sceneParamsToObj(props.scene)
		}
		// #endif
		pageParams = query
		if (query.id) storeId.value = query.id
		// nextTick(() => {
		// 	uni.createSelectorQuery()
		// 		.select('.top-header')
		// 		.boundingClientRect(res => {
		// 			const h = res.height ? res.height : 303
		// 			// scrollViewH.value = `calc(100vh - ${appTopPadding} - ${h}px - 40rpx)`
		// 		})
		// 		.exec()
		// })
		if (props.step) {
			swiperCurrent.value = Number(props.step)
		}

		getStoreGrouping({
			storeId: storeId.value
		}).then(res => {
			uni.hideLoading()

			classifyList.value = res.data

		})
	})

	onShow(() => {
		getData(storeId.value)
		
		isShow.value = true
		handleRefreshEvaluationList()
	})
</script>
<style>
	page {
		background-color: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.c-fd {
		color: #fd6d00;
	}

	.c-ef {
		color: #feffff;
	}

	.c-65 {
		color: #656565;
	}

	.border-b-ed {
		border-bottom: 2rpx solid #ededed;
	}

	.nearby-store-wrapper {
		.lh-16 {
			line-height: 1.6;
		}
		
		.top-header {
			height:540rpx;
			&__swiper {
				z-index: 1;
				height: 394rpx;
				width: 100vw;

				&__indicators {
					position: absolute;
					right: 20rpx;
					bottom: 156rpx;
					padding: 4rpx 18rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 18rpx;
				}
			}

			.header-content {
				bottom: 0;
				height: 146rpx;
				border-radius: 10rpx;
				align-items: flex-start;

				.logo {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.store-name {
					@include fontH(36, 50);
					width: 428rpx;
				}
			}
		}

		.nearby-store-tabs {
			padding: 0 20rpx;

			>view {
				line-height: 100rpx;
				height: 100rpx;
			}

			.is-active {
				position: relative;
				font-weight: 600;

				&::after {
					content: '';
					position: absolute;
					left: calc(50% - 21rpx);
					bottom: 0;
					width: 42rpx;
					height: 10rpx;
					background: var(--color-primary);
					border-radius: 10rpx;
				}
			}
		}

		.mene-card-wrapper {
			width: 164rpx;

			.menu {
				height: calc(100vh - 608rpx);
			}
		}

		.scroll {
			height: calc(100vh - 608rpx);

			.goods-list {
				height: 100%;
			}
		}

		.body-box {
			// top-header的540高度+nearby-store-tabs的100高度和30下边距
			height: calc(100vh - 670rpx);
			&__swiper {
				width: 100vw;
				height: calc(100vh - 670rpx);
				.classify-item {
					height: 90rpx;
					flex: 1 0 calc(100vw / 5);
					box-sizing: border-box;
					white-space: nowrap;
					&:last-child{
						margin-right:20rpx !important;
					}
				}
				// &-classify-scroll{
					
				// }
				&-goods-scroll{
					// top-header的540高度+nearby-store-tabs的100高度和30下边距+classify-item的90高度
					height: calc(100vh - 760rpx);
				}
			}
		}
	}


	.nearby-store-evaluation {
		&__tab-item {
			width: 156rpx;
			height: 60rpx;
			background: #ededed;
			border-radius: 30rpx;
			@include fontH(26, 60);
		}

		&__scroll {
			// top-header的540高度+nearby-store-tabs的100高度和30下边距+nearby-store-evaluation__tab-item的60高度和30上下边距
			height: calc(100vh - 790rpx);

			scroll-view {
				height: 100%;
			}
		}

		&__avatar {
			flex: 0 0 80rpx;
			align-items: flex-start;

			.image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		&__reply-box {
			padding: 14rpx 20rpx 20rpx;
			background: #ededed;
			border-radius: 10rpx;
			color: #989898;
		}
	}

	.nearby-store-info {
		padding-bottom: 140rpx;
		// height: calc(100vh - 508rpx);
		overflow: auto;

		&__btn {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 140rpx;
			background: #ffffff;
			box-shadow: 0 -4rpx 20rpx 0 rgba(0, 0, 0, 0.05);
			padding: 0 20rpx;

			&-box {
				height: 90rpx;
				border-radius: 46rpx;
			}
		}
	}

	.nearby-phone-popup__item {
		padding: 26rpx;
		border-radius: 10rpx;
		width: calc(100vw - 60rpx);
		margin-left: 30rpx;
	}

	.bg-white-box {
		border-radius: 20rpx;
		background-color: #ffffff;
		padding: 30rpx 20rpx;
	}

	.swiper-item-three {
		padding: 40rpx 30rpx;
		border-radius: 20rpx;

		.check-btn {
			padding: 10rpx 38rpx;
			border-radius: 32rpx;
		}
	}

	.goods-item {
		flex: 0 0 344rpx;

		&__img {
			width: 344rpx;
			height: 346rpx;
		}
	}

	.c-c0 {
		color: #C0C4CC;
	}

	.canvas-box {
		left: -9999px;
		top: -9999px;

		.store-canvas {
			width: 290px;
			height: 447px;
			font-kerning: normal;
		}
	}

	
</style>